<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>记忆课堂</title>
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/stylesheets/base.css">
    <style>
  
    .fade-enter, .fade-leave-active {
      opacity: 0;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }

    .body {

      position: relative;
    }

    .body .transition {
      width: 100%;
      position: absolute;
      top: 0;
    }
    .contentContailer {
      padding: 20px;
      background: #fff;
    }
    
    .breadcrumb {
      background: #fff;
    }

    .nav-xs-box {
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
    }
    .nav-xs {
      background: #fcfcfc;
      clear: both;
      /*display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
*/    }
    .nav-xs .nav-xs-item {
      float: left;
      margin: 5px 10px;
      //flex: 1;
    }
    .nav-xs .nav-xs-item.active a{
      background: #337ab7;
      color: #fff;
      border-color: #fff;
    }


    /*基本信息*/
    .identity-box {
      position: absolute;
      right: 0;
      top: 0;
    }
    .baseInfo .form-group {
      border-bottom: 1px solid #eee;
    }
    .baseInfo .form-group.last-group {
      border: 0;
    }

    /*训练中心*/
    .test-list-item {
      padding: 12px 20px;
      box-shadow: 0px 0px 1px 1px #eee;
      margin-top: 10px;
    }

    /*帖子列表*/
    .post-area {
      border-left: 1px solid #eee;
    }
    .post-list-item {
      padding: 10px;
      border-bottom: 1px dashed #eee;

    }
    .post-list h4 a {
      color: #333;
    }
  

    /*安全中心*/
    .safe-center-item {
      min-height: 300px;
    }
    .safe-center-item h4 {
      color: #404040;
    }

    .email-bind-content {
      padding-left: 20px;
    }


    /*退出登录*/
    
    .exit-card {
      flex-direction: column;
      justify-content: center;
      width: 80%;
      height: 500px;
      display: flex;
      margin: 0 auto;
      padding: 20px 40px;
      text-align: center;
    }
    .exit-card h4, .exit-card .exit-card-body {
      flex: 1;
    }
    .exit-card .exit-card-body {
      margin-top: 20px;
    }
    .exit-card .exit-card-body {
      display: flex;
      justify-content: space-around;
    }
    .exit-card .exit-card-body .btn-box {
      flex: 1;
    }


    /*网站管理*/
    .manage-rule {
      margin-top: 40px;
    }
    .manage-rule h5 {
      display: inline-block;
      padding: 4px 10px;
      background: #fb8b06;
      margin-bottom: 16px;
      color: #fff;
      border-radius: 8px;
    }
    .manage-rule-item {
      margin-bottom: 10px;
    }
    .manage-rule-mark span{
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      text-align: center;
      line-height: 24px;
      background: #fb8b06;
      color: #fff;
    }
    .manage-rule-content {
      line-height: 24px;
      color: #666;
    }
    
    


    </style>
</head>
<body>
  <div id="app">
    <div class="bar clearfix">
      <div class="container">
        <div class="pull-left">
          <a href="/"><span class="back">Home</span></a>
        </div>
        <span class="bar-en">memory class</span>
        <div class="user-box pull-right">
          <a :href="'/user/center.html?id=' + loginer._id" v-show="loginer.name">
            <span class="user-name">{{loginer.name.slice(0,2)}}</span>
          </a>
          <a href="/user/login.html" v-show="!loginer.name">
            <span class="my-btn">登陆</span>
          </a>
        </div>
      </div>
    </div>
    <div class="container contentContailer">
      <!--面包屑导航-->
      <ol class="breadcrumb hidden-xs">
        <li><a href="/">首页</a></li>
          <li><a :href="'/user/center.html?id=' + userId">个人中心</a></li>
          <li><a href="javascript:void(0)">{{tabNameArr[tabIndex]}}</a></li>
      </ol>
      
      <ul class="nav nav-pills nav-stacked user-center-nav col-md-2 hidden-xs">
        <li class="user-center-nav-item" v-for="(tabName, index) in tabNameArr" 
          :class="{'active': index == tabIndex}" @click="tabIndex = index" 
           v-show="loginer._id == userId || ( index < 4 && loginer._id != userId)"
          >
          <a href="javascript:void(0)">{{tabName}}</a>
        </li>
      </ul>
      <!--手机端导航-->
      <div class="nav-xs-box visible-xs-block">
        <h4 class="clearfix text-muted">
          <span class="">{{tabNameArr[tabIndex]}}</span>
          <span class="pull-right">
            <span class=" glyphicon glyphicon-th-list" @click="menuToggle = !menuToggle"></span>
          </span>
        </h4>
         <div class="nav-xs clearfix" v-show="menuToggle">
          <div class="nav-xs-item" v-for="(tabName, index) in tabNameArr" 
            :class="{'active': index == tabIndex}" @click="tabIndex = index;menuToggle = false" 
             v-show="loginer._id == userId || ( index < 4 && loginer._id != userId)"
            >
            <a class="btn btn-default" href="javascript:void(0)">{{tabName}}</a>
          </div>
        </div>
      </div>
      
      <div class="body col-md-9 col-md-offset-1">

        <transition name="fade">
          <base-info-component class="transition" v-show="tabIndex == 0" v-on:set-user="setUser" :loginer="loginer">
          </base-info-component>
        </transition>

        <transition name="fade">
          <test-center-component class="transition" v-show="tabIndex == 1" :loginer="loginer">
          </test-center-component>
        </transition>

        <transition name="fade">
          <post-center-component class="transition" v-show="tabIndex == 2"></post-center-component>
        </transition>

        <transition name="fade">
          <my-active-component class="transition" v-show="tabIndex == 3"></my-active-component>
        </transition>

        <transition name="fade">
          <safe-center-component v-if="loginer._id == userId" class="transition" v-show="tabIndex == 4" :user="user">
          </safe-center-component>
        </transition>

        <transition name="fade">
          <apply-manage-component v-if="loginer._id == userId" class="transition" v-show="tabIndex == 5"></apply-manage-component>
        </transition>

        <transition name="fade">
          <exit-login-component v-if="loginer._id == userId" class="transition" v-show="tabIndex == 6" v-on:go-to-base-info="tabIndex = 0">
          </exit-login-component>
        </transition>
        
      </div>
      
      
    </div>

  </div>

  <template id="baseInfo">
    <div class="baseInfo">
      <div class="identity-box">
        <span class="glyphicon glyphicon-bookmark"></span>
        {{user.identity == 1 ? '管理员': '普通会员'}}
        <a v-show="user.identity > 0" href="/admin">进入后台</a>
        
      </div>
      <form action="" class="form-horizontal">
        <div class="form-group">
          <label for="" class="label-control col-md-2 col-xs-4">用户名</label>
          <div class="col-md-8 col-xs-8">
            <p class="form-control no-border" v-show="!editting" >{{user.name}} </p>
            <input type="text" class="form-control" v-model="userNews.name" v-show="editting" >
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2 col-xs-4">个人简介</label>
          <div class="col-md-8 col-xs-8">
            <p class="form-control no-border" v-show="!editting" >{{user.introduction}} </p>
            <textarea class="form-control" v-model="userNews.introduction" v-show="editting" >
            </textarea>
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2 col-xs-4">性别</label>
          <div class="col-md-8 col-xs-8">
            <p class="form-control no-border" v-show="!editting">{{user.sex == 1? '男' : '女'}}</p>
            <select name="" id="" class="form-control" v-model="userNews.sex" v-show="editting">
              <option :value="1">男</option>
              <option :value="0">女</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2 col-xs-4">年龄</label>
          <div class="col-md-8 col-xs-8">
            <p class="form-control no-border" v-show="!editting" >{{user.age}} </p>
            <input type="text" class="form-control" v-model="userNews.age" v-show="editting" >
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2 col-xs-4">QQ</label>
          <div class="col-md-8 col-xs-8">
            <p class="form-control no-border" v-show="!editting" >{{user.qq}} </p>
            <input type="text" class="form-control" v-model="userNews.qq" v-show="editting" >
          </div>
        </div>
        <div class="form-group last-group" v-if="loginer.id == user.id">
          <div class="col-md-8 col-md-offset-2 clearfix">
            <button v-show="!editting" @click.prevent="editting = true" class="btn btn-info">修改信息</button>
            <button v-show="editting" @click.prevent="saveEdit" class="btn btn-success">保存修改</button>
            <button v-show="editting" @click.prevent="editting = false" class="btn btn-default">取消修改</button>
          </div>
        </div>

      </form>
    </div>
  </template>


  <template id="testCenter">
    <div class="testCenter">
      <h3 class="text-center color-gray" v-show="list.length == 0">
        没有练习记录
        
      </h3>
      <p class="text-center">
        <a href="/test/center.html">
          <small>点此进入训练场</small>
        </a>
      </p>
      <div class="test-area">
        <div class="test-list">
          <div class="test-list-item" v-for="(item, index) in list">
            <h5 class="clearfix">
              <span class="color-orange">{{item.name}} </span>
              <div class="pull-right">
                <div v-show="loginer.id == $parent.userId">
                  <a :href="'/test/test.html?id=' + item.topicId + '&type=2&userId=' + loginer.id">答题情况</a>
                  <a :href="'/test/test.html?id=' + item.topicId + '&type=3'">查看答案</a>
                </div>
              
                <div v-show="loginer.id != $parent.userId">
                  <a :href="'/test/test.html?id=' + item.topicId + '&type=1'">去做此习题</a>
                </div>
              </div>
            </h5>
            <p class="color-gray">
              描述：{{item.desc}}
            </p>
            <p>备注：{{item.remark}}</p>
            
          </div>
        </div>
        <div class="handler-box clearfix">
          <button class="btn btn-default" v-show="page > 1" @click="getTest(-1)">
            上一页
          </button>
          <button class="btn btn-default" v-show="list.length == 10" @click="getTest(1)">
            下一页
          </button>
        </div>
      </div>
    </div>
  </template>

  <template id="postCenter">
    <div class="postCenter">
     <h3 class="text-center color-gray" v-show="list.length == 0">
        没有发表过帖子
      </h3>
      <div class="post-area">
        <div class="post-list">
          <div class="post-list-item" v-for="(post, index) in list">
            <section>
              <h4>
                <a :href="'/post/detail.html?id=' + post._id">{{post.title}}</a>
              </h4>
              <article>
                {{post.content}}
              </article>
              <div class="else-info color-gray clearfix">
                <span class="pull-right">
                  <a :href="'/post/detail.html?id=' + post._id">点此查看详情</a>
                </span>
                <span class="else-info-item">阅读[{{post.readCount}}] </span>
                <span class="else-info-item">评论[{{post.commentCount}}]</span>
                <span class="else-info-item">发表时间：{{post.createdAt | date}}</span>
              </div>
            </section>
          </div>
        </div>
        <div class="handler-box clearfix">
          <button class="btn btn-default" v-show="page > 1" @click="getPost(-1)">
            上一页
          </button>
          <button class="btn btn-default" v-show="list.length == 10" @click="getPost(1)">
            下一页
          </button>
        </div>
      </div>
    </div>
  </template>

  <template id="myActive">
    <div class="myActive">
      <!-- <h3 class="text-center color-gray" v-show="list.length == 0">此人太高冷，没有动态</h3>
      <div class="active-list">
        <div class="active-list-item" v-for="(item, index) in list" >
          {{item.active.handler.name}}
        </div>
      </div>-->    
      <h3 class="text-center text-muted">暂未开放</h3>
    </div>
  </template>

  <template id="safeCenter">
    <div class="safeCenter">
      <div class="safe-center-item email-bind">
        <h4>
          <span class="glyphicon glyphicon-bookmark"></span>
          <span>邮箱绑定</span>
        </h4>
        <div class="email-bind-content">
          <div>
            <div class="color-gray">
              <span v-if="!user.email">您还未绑定邮箱，为了您的账户安全，请尽快绑定邮箱。</span>
              <span v-if="user.email">您已经绑定的邮箱： <strong>{{user.email}}</strong></span>
            </div>

            <form action="javascript:void(0)" class="form-horizontal mt-20">
              <div class="form-group">
                <label class="col-md-2 label-conotrol col-xs-4" for="">邮箱</label>
                <div class="col-md-4 col-xs-8">
                  <input type="text" v-model="bindEmailInfo.email" class="form-control" placeholder="请输入邮箱地址">
                </div>
              </div>
              <div class="form-group">
                <label for="" class="col-md-2 label-control col-xs-4">验证码</label>
                <div class="col-md-2 col-xs-4">
                  <input type="text" v-model="bindEmailInfo.verifyCode" class="form-control" placeholder="验证码">
                </div>
                <div class="col-md-2 col-xs-4">
                  <button :class="{'disabled': bindEmailInfo.disabled}" @click="sendVerifyCode" class="btn btn-default pull-right">
                    {{bindEmailInfo.getVerifyCodeBtnText}}
                  </button>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 label-conotrol" for="">账号密码</label>
                <div class="col-md-4">
                  <input type="text" v-model="bindEmailInfo.password" class="form-control" placeholder="请输入账号密码">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-4 col-md-offset-2">
                  <button @click="bindEmail" class="btn btn-success">
                    <span v-show="user.email">修改绑定邮箱</span>
                    <span v-show="!user.email">立即绑定邮箱</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
      </div>
      <div class="safe-center-item password-alter">
        <h4>
          <span class="glyphicon glyphicon-bookmark"></span>
          <span>修改密码</span>
        </h4>
        <div class="password-alter-content col-md-10">
          <form action="javascript:void(0)" class="form-horizontal">
            <div class="form-group">
              <label for="" class="col-md-2 label-control col-xs-4">旧密码</label>
              <div class="col-md-4 col-xs-8">
                <input type="password" class="form-control" v-model="changePassword.oldPassword" placeholder="输入旧密码">
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-2 label-control col-xs-4">新密码</label>
              <div class="col-md-4 col-xs-8">
                <input type="password" class="form-control" v-model="changePassword.newPassword" placeholder="输入新密码">
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-2 label-control col-xs-4">确认密码</label>
              <div class="col-md-4 col-xs-8">
                <input type="password" class="form-control" v-model="changePassword.confirmPassword" placeholder="再次输入新密码">
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-2 col-md-offset-2 col-xs-4 col-xs-offset-4">
                <button class="btn btn-info" @click="saveNewPassword">确认修改</button>
              </div>
              <div class="col-md-2 col-xs-4">
                <a href="javascript:void(0)" @click="forgetPassword" >忘记密码？</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </template>

  <template id="applyManage">
    <div class="applyManage">
      <ul class="nav nav-tabs">
        <li  @click="tabIndex = 0" :class="{'active': tabIndex == 0}">
          <a href="javascript:void(0)">申请管理</a>
        </li>
        <li  @click="tabIndex = 1" :class="{'active': tabIndex == 1}">
          <a href="javascript:void(0)">投诉建议</a>
        </li>
      </ul>
      <div class="col-md-8 mt-20">
        <div class="content-1 " v-show="tabIndex == 0">
          <form action="" class="form-horizontal">
            <div class="form-group">
              <label class="col-md-2 label-control col-xs-4">申请人</label>
              <div class="col-md-4 lineh30 col-xs-8">
                {{$parent.loginer.name}}
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-2 label-control col-xs-4">申请理由</label>
              <div class="col-md-8 col-xs-8">
                <textarea name="" id="" class="form-control" v-model="applyManageRemark" placeholder="请输入您的申请理由"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-offset-2 col-md-4">
                <button class="btn btn-primary" @click.prevent="submitAppply">提交申请</button>
              </div>
            </div>
          </form>
          <div class="manage-rule">
            <h5>管理员职责</h5>
            <div class="manage-rule-item clearfix">
              <div class="manage-rule-mark pull-left col-xs-2 col-md-1"><span>1</span></div>
              <div class="manage-rule-content pull-left col-xs-10">
                管理员可以进入练习题管理页，有权对习题和答案进行增删改查的操作。
              </div>
            </div>
            <div class="manage-rule-item clearfix">
              <div class="manage-rule-mark pull-left col-xs-2 col-md-1"><span>2</span></div>
              <div class="manage-rule-content pull-left col-xs-10">
                管理员发布习题必须是有意义的，积极的或者知识性的习题。
              </div>
            </div>
            <div class="manage-rule-item clearfix">
              <div class="manage-rule-mark pull-left col-xs-2 col-md-1"><span>3</span></div>
              <div class="manage-rule-content pull-left col-xs-10">
                管理员可以查看其它用户的答题情况。
              </div>
            </div>
          </div>
        </div>
        <div class="content-2" v-show="tabIndex == 1">
          <form action="" class="form-horizontal">
            <div class="form-group">
              <label class="col-md-3 label-control col-xs-4">投诉建议人</label>
              <div class="col-md-4 lineh30 col-xs-8">
                {{$parent.loginer.name}}
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-3 label-control col-xs-4">投诉建议内容</label>
              <div class="col-md-8 col-xs-8">
                <textarea name="" id="" class="form-control" v-model="suggestRemark" placeholder="请输入您想对我们说的话"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-4 col-md-offset-3">
                <button class="btn btn-default" @click.prevent="submitSuggest">提交投诉建议</button>
              </div>
            </div>
          </form>
          <div class="text-muted">
            * 如果有什么建议或者不满可以提出来，我们会尽快做到更好
          </div>
        </div>
      </div>
    </div>
  </template>

  <template id="exitLogin">
    <div class="exitLogin">
      <div class="exit-card">
        <h4 class="title text-muted">确定要退出么？</h4>
        <div class="exit-card-body">
          <div class="btn-box">
            <button @click="cancelExit" class="btn btn-default">
              取消
            </button>
            
          </div>
          <div class="btn-box">
            <button @click="exit" class="btn btn-warning">
              确定
            </button>
            
          </div>
        </div>
      </div>
    </div>
  </template>
  

  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/scripts/assets/filter.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script src="/scripts/user/center.js"></script>
  <script>


    new Vue({
      el: '#app',
      data: {
        tabIndex: 0,
        tabNameArr: ['基本信息', '训练中心', '帖子列表', '最新动态', '安全中心', '网站管理' ,'退出登录'],
        userId: '',
        loginer: {
          name: '',
          _id: ''
        },
        user: {},
        menuToggle: false
      },
      mounted: function () {
        var user = $$.localData('memoryClassUser')
        if (user) {
          this.loginer = user
        }
        this.userId = $$.getQuery('id')
      },
      methods: {
        setUser: function (user) {
          this.user = user
        }
      },
      components: {
        'base-info-component': baseInfoComponent,
        'safe-center-component': safeCenterComponent,
        'test-center-component': testCenterComponent,
        'post-center-component': postCenterComponent,
        'my-active-component': myActiveComponent,
        'apply-manage-component': applyManageComponent,
        'exit-login-component': exitLoginComponent
      }
    })
  </script>
</body>
</html>